<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #d6e0ff 0%, #e0c3fc 100%);
        }
        .register-bg {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .register-card {
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.13);
            padding: 36px 30px 24px 30px;
            min-width: 340px;
            max-width: 90vw;
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }
        .register-title {
            text-align: center;
            color: #2d2d4b;
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 6px;
        }
        .register-subtitle {
            text-align: center;
            color: #888;
            font-size: 15px;
            margin-bottom: 22px;
        }
        .form-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 18px;
        }
        .form-group label {
            margin-bottom: 6px;
            color: #3a7ca5;
            font-size: 15px;
            font-weight: 500;
        }
        .input-wrapper {
            display: flex;
            align-items: center;
            background: #f7f7fb;
            border-radius: 6px;
            border: 1.5px solid #e0e0ef;
            padding: 0 10px;
            transition: border-color 0.2s;
        }
        .input-wrapper:focus-within {
            border-color: #b39ddb;
        }
        .input-icon {
            font-size: 18px;
            color: #b39ddb;
            margin-right: 6px;
        }
        .ipt {
            border: none;
            background: transparent;
            padding: 10px 0;
            font-size: 16px;
            outline: none;
            flex: 1;
        }
        .msg {
            min-height: 18px;
            font-size: 13px;
            margin-top: 3px;
            color: #e74c3c;
            transition: color 0.2s;
        }
        .buttonContainer {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 6px;
            margin-bottom: 10px;
        }
        .btn1 {
            border: none;
            border-radius: 6px;
            padding: 10px 0;
            width: 100%;
            background: linear-gradient(90deg, #b39ddb 0%, #a18cd1 100%);
            color: #fff;
            font-size: 17px;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(163, 148, 255, 0.08);
            transition: background 0.2s, transform 0.1s;
            letter-spacing: 2px;
        }
        .btn1:hover, .btn1:focus {
            background: linear-gradient(90deg, #a18cd1 0%, #b39ddb 100%);
            transform: translateY(-2px) scale(1.03);
        }
        .login-tip {
            text-align: center;
            color: #888;
            font-size: 14px;
            margin-top: 8px;
        }
        .login-link {
            color: #b39ddb;
            text-decoration: none;
            margin-left: 2px;
            transition: color 0.2s;
        }
        .login-link:hover {
            color: #7e57c2;
        }
        #particles-bg {
            position: fixed;
            left: 0; top: 0; right: 0; bottom: 0;
            width: 100vw;
            height: 100vh;
            z-index: 0;
            pointer-events: auto;
        }
        .register-bg, .register-card {
            position: relative;
            z-index: 1;
        }
        @media (max-width: 480px) {
            .register-card {
                padding: 18px 6vw 18px 6vw;
                min-width: unset;
            }
            .btn1 {
                font-size: 15px;
            }
        }
    </style>
    <script>
        function checkUsername(){
            var reg=/^[\u4e00-\u9fa5a-zA-Z0-9_]{2,16}$/;
            var usernameInput=document.getElementById("usernameInput");
            var username=usernameInput.value;
            var usernameMsg=document.getElementById("usernameMsg");
            if(!reg.test(username)){
                usernameMsg.innerText="用户名格式有误（2-16位，支持中文、字母、数字、下划线）";
                return false;
            }
            /**
             * 1、响应乱码问题
             * 2、响应信息格式不规范，处理方式不规范
             *      后端响应回来的信息应当有一个统一的格式，前后端共同遵守
             *      响应一个JSON串{"名":"值","名":"值",.....}
             *      {
             *          "code":"",业务状态码  本次请求是否成功？是什么原因失败？ 不是响应报文里的响应码（404...)
             *          "message":"" 业务状态码的补充说明/描述
             *          "data":{} 本次响应的数据
             *      }
             * 3、校验不通过，无法阻止表单提交的问题 未来使用Vue axios 结合promise处理
             *
             */
            //格式正确，通过之后，继续校验用户名是否被占用
            var request=new XMLHttpRequest();
            //设置回调函数  设置响应回来的信息如何处理
            request.onreadystatechange=function(){
                if (request.readyState == 4 && request.status == 200){//后端响应成功
                    var result=JSON.parse(request.responseText);
                    if (result.code!=200){
                        usernameMsg.innerText="不可用";
                    }else {
                        usernameMsg.innerText="可用";
                    }
                }
            }
            //设置请求方式和请求的资源的资源路径
            request.open("GET","/user/checkUsernameUsed?username="+username);
            //发送请求
            request.send();


            // usernameMsg.innerText="用户名格式正确";
            // return true;
        }
        function checkUserPwd(){
            var reg=/^[a-zA-Z0-9]{6,20}$/;
            var userPwdInput=document.getElementById("userPwdInput");
            var userPwd=userPwdInput.value;
            var userPwdMsg=document.getElementById("userPwdMsg");
            if(!reg.test(userPwd)){
                userPwdMsg.innerText="密码格式有误（6-20位字母数字组合）";
                return false;
            }
            userPwdMsg.innerText="密码格式正确";
            return true;
        }
        function checkConfirmPwd(){
            var reg=/^[a-zA-Z0-9]{6,20}$/;
            var userPwdInput=document.getElementById("userPwdInput");
            var confirmPwdInput=document.getElementById("confirmPwdInput");
            var confirmPwdMsg=document.getElementById("confirmPwdMsg");
            var userPwd=userPwdInput.value;
            var confirmPwd=confirmPwdInput.value;

            if(!reg.test(confirmPwd)){
                confirmPwdMsg.innerText="密码格式有误（6-20位字母数字组合）";
                return false;
            }else if(userPwd !== confirmPwd){
                confirmPwdMsg.innerText="两次密码不一致";
                return false;
            }
            confirmPwdMsg.innerText="密码一致";
            return true;
        }
        function checkForm(){
            var f1=checkUserPwd();
            var f2=checkUsername();
            var f3=checkConfirmPwd();
            return f1&&f2&&f3;
        }
    </script>
</head>
<body>
    <div id="particles-bg"></div>
    <div class="register-bg">
        <div class="register-card">
            <h2 class="register-title">注册新账号</h2>
            <div class="register-subtitle">请填写注册信息</div>
            <form method="post" action="/user/regist" onsubmit="return checkForm()">
                <div class="form-group">
                    <label for="usernameInput">用户名</label>
                    <div class="input-wrapper">
                        <span class="input-icon">👤</span>
                        <input class="ipt" type="text" id="usernameInput" name="username" placeholder="请输入用户名" onblur="checkUsername()">
                    </div>
                    <span id="usernameMsg" class="msg"></span>
                </div>
                <div class="form-group">
                    <label for="userPwdInput">密码</label>
                    <div class="input-wrapper">
                        <span class="input-icon">🔒</span>
                        <input class="ipt" type="password" id="userPwdInput" name="userPwd" placeholder="请输入密码" onblur="checkUserPwd()">
                    </div>
                    <span id="userPwdMsg" class="msg"></span>
                </div>
                <div class="form-group">
                    <label for="confirmPwdInput">确认密码</label>
                    <div class="input-wrapper">
                        <span class="input-icon">🔒</span>
                        <input class="ipt" type="password" id="confirmPwdInput" name="confirmPwd" placeholder="请再次输入密码" onblur="checkConfirmPwd()">
                    </div>
                    <span id="confirmPwdMsg" class="msg"></span>
                </div>
                <div class="buttonContainer">
                    <input class="btn1" type="submit" value="注 册">
                </div>
            </form>
            <div class="login-tip">已有账号？<a href="login.html" class="login-link">立即登录</a></div>
        </div>
    </div>
    <script src="particles.min.js"></script>
    <script>
    particlesJS("particles-bg", {
      "particles": {
        "number": { "value": 40, "density": { "enable": true, "value_area": 800 } },
        "color": { "value": "#ffffff" },
        "shape": { "type": "circle" },
        "opacity": { "value": 0.7, "random": true },
        "size": { "value": 8, "random": true },
        "move": {
          "enable": true,
          "speed": 1.5,
          "direction": "top",
          "straight": false,
          "out_mode": "out"
        }
      },
      "interactivity": {
        "events": {
          "onhover": { "enable": true, "mode": "bubble" },
          "onclick": { "enable": true, "mode": "repulse" }
        },
        "modes": {
          "bubble": { "distance": 120, "size": 12, "duration": 2, "opacity": 0.6 },
          "repulse": { "distance": 100, "duration": 0.4 }
        }
      },
      "retina_detect": true
    });
    </script>
</body>
</html> 